<template>
  <div v-if="tableSetVisible" class="set-modal">
    <div class="drag-modal">
      <div class="drag-contain beauty-scroll">
        <draggable :animation="150" filter=".forbid" v-model.trim="totalColmuns" :scrollSpeed="2" class="mt10" :move="onMove">
          <div v-for="(item, idx) in totalColmuns" :key="item.title">
            <sort-item
              :class="item.defaultChecked && 'forbid'"
              :isChecked="mapChecked[item.title]"
              :defaultChecked="item.defaultChecked"
              :title="item.title"
              @onChecked="onChecked"
              @click.native="onSetFrozen(idx, item.defaultChecked)"
            >
              <a-icon type="tag" class="frozen-type" v-if="currentForzenIndex === idx" />
            </sort-item>
          </div>
        </draggable>
      </div>
      <div class="confirm-btn">
        <a-button class="mr10" @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleConfirm">确认</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { PLACEHOLDER_INPUT } from "@/config/const";
import Draggable from 'vuedraggable';
import SortItem from "../draggableTable/SortItem.vue";
import { saveColumns } from "@/services/businessManage";
import cloneDeep from "lodash.clonedeep";
export default {
  name: "SetModal",
  data() {
    return {
      display: "Handle",
      PLACEHOLDER_INPUT,
      checkedList: ["订单编号", "运单编号"],
      indeterminate: false,
      fixedNum: "",
      checkAll: false,
      cloneColmuns: [],
      totalColmuns: [],
      currentForzenIndex: 0,
      number: {
        value: 11
      },
      mapChecked: {},
      pageSize: 10
    };
  },
  components: {
    SortItem,
    Draggable
  },
  computed: {
    pageLength() {
      return this.tableData.length;
    }
  },
  props: {
    tableSetVisible: {
      type: Boolean,
      default: false
    },
    checkList: {
      type: Array,
      default() {
        return [];
      }
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    linkDetail: {
      type: String,
      default: ""
    },
    isDisabledObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  created() {
    this.createCloneColmuns();
  },
  mounted() {
    this.onMapChecked();
  },
  methods: {
    onMapChecked() {
      this.columns.forEach(o => {
        if (o.checked) {
         this.$set(this.mapChecked, o.title, o.checked)
        }
      })
    },
    createCloneColmuns() {
      this.cloneColmuns = cloneDeep(this.columns);
      this.totalColmuns = cloneDeep(this.columns);
      this.currentForzenIndex = this.cloneColmuns.findIndex(value => !value.defaultChecked);
    },
    handleCancel() {
      this.$emit('onShowModal', false);
    },
    handleConfirm() {
      let checkedArr = [], arr = [];
      for(let key in this.mapChecked) {
        if (this.mapChecked[key]) {
          checkedArr.push(key)
        }
      }

      this.totalColmuns.forEach(o => {
        if (!o.defaultChecked && checkedArr.includes(o.title)) {
          o.checked = true;
        }
      })
      arr = this.totalColmuns.filter(o => !o.defaultChecked ? checkedArr.includes(o.title) : true)
      // 针对表头固定的处理
      this.fixedColumns(arr)
    },
    fixedColumns(arr) {
      arr.forEach((o, i) => i < this.currentForzenIndex ? o.fixed = 'left' : delete o.fixed)
      this.onSaveColumns(arr);
    },
    // 保存表头
    async onSaveColumns(arr) {
      const { data: { message, code } } = await saveColumns();
      if (code === 200) {
        this.$message.success(message);
        this.triggerDisabled();
        this.$emit('onShowModal', false);
        this.$emit('onUpdateColums', arr);
      }
    },
    // 配置表头触发from表单disabled状态
    triggerDisabled() {
      let obj = cloneDeep(this.isDisabledObj);
      let arr = this.cloneColmuns.map(o => o.key);
      for(let key in obj) {
        if (!arr.includes(key)) {
          obj[key] = true;
        }
      }
      this.$emit('update:isDisabledObj', obj)
    },
    onSetFrozen(idx, defaultChecked) {
      if (defaultChecked) {
        return false;
      }
      this.currentForzenIndex = idx;
    },
    onChecked(params) {
      this.$set(this.mapChecked, params, !this.mapChecked[params]);
    },
    //禁止拖动默认表头
    onMove(e) {
      if (e.relatedContext.element.defaultChecked) return false;
      return true;
    }
  }
};
</script>

<style lang="less" scoped>
  .set-modal {
    width: 280px;
    position: absolute;
    background: #fff;
    left: 40px;
    top: 0;
    z-index: 999;
    padding: 10px;
    border: 1px solid #eee;

    ::v-deep .ant-tabs-tabpane {
      & > div {
        margin-bottom: 10px;
      }
    }

    .frozen-type {
      position: absolute;
      top: -5px;
      right: 0
    }
  }

  .drag-modal {
    .confirm-btn {
      margin-top: 10px;
      text-align: right;
    }

    .drag-contain {
      height: 300px;
      overflow-y: scroll;
      padding-right: 10px;
    }

    ::-webkit-scrollbar {
      width: 2px;
      height: 4px;
    }

    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(172, 172, 175, 0.6);
    }

    ::-webkit-scrollbar-thumb {
      background-color: #6e6e6e;
    }
  }
</style>
